<template>
  <div>
    <div id="centreLeft2Chart" ></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";

export default {
  data() {
    return {
      chart: null,
      val:[
        // { value: 20, name: "干货船" },
        // { value: 26, name: "其他船" },
        // { value: 24, name: "散货船" },
        // { value: 25, name: "油船" },
        // { value: 10, name: "危险品船" },
      ],
      company_id:''
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.getData();
  },
  props: {
    selectProp: {
      type: String,
      required: true
    }
  },
  watch:{
    selectProp:{
      handler(n){
        console.log('centreLeft2Chart获取父组件的参数： ' + n)
        this.company_id = n
        this.getData()
      },
      deep:true// 深度监听父组件传过来对象变化
    }
  },

  methods: {
    //接收比例数据
    getData(){
      this.axios.get('http://36.156.158.102:8085/cqdata/cqdata/queryReceivePercent?companyId='+ this.company_id).then((response)=>{
        this.val = response.data.data.data;
        this.draw();
      })
    },
    draw() {
      const val = this.val
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("centreLeft2Chart"));
      //  ----------------------------------------------------------------

      var option = {
        legend: {
          top: "80%",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "rgba(255,255,255)",
            fontSize: "18"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 注意颜色写的位置
        color: [
          "#006cff",
          "#60cda0",
          "#ed8884",
          "#ff9f7f",
          "#0096ff"
        ],
        series: [
          {
            name: "接收比例",
            type: "pie",
            // 如果radius是百分比则必须加引号
            radius: ["10%", "60%"],
            center: ["50%", "42%"],
            roseType: "radius",
            data: val,
            // 修饰饼形图文字相关的样式 label对象
            label: {
              fontSize: 18
            },
            // 修饰引导线样式
            labelLine: {
              // 连接到图形的线长度
              length: 10,
              // 连接到文字的线长度
              length2: 10
            }
          }
        ]
      };
      this.chart.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
  #centreLeft2Chart{
    width: 100%;
    height: 285px;
    margin: 0 auto;
  }
</style>
